<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定2</title>
    <script src="/js/vue.js"></script>
    <style>
        /*active样式名称*/
        .active {
            width: 200px;
            height: 200px;
            border: blue 1px solid;
        }

        .myFont {
            color: red;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div id="app">
    <p>:class="变量名或者对象或者数组"</p>
    <div :class="[activeClass,fontClass]">这里是使用bind:class的DIV</div>
    <hr/>

    <p>:class="{样式名称:bool值}" 如果bool值为真，使用对应的样式</p>
    <div :class="{'active':false,'myFont':true}">这里是使用bind:class的DIV</div>
    <hr/>

    <div style="background-color: aqua;color:red">传统的内联样式使用</div><br/>
    <div :style="bgColor">VUE内联样式使用</div>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            activeClass: "active",
            fontClass: "myFont",
            bgColor: {
                backgroundColor: 'aqua',
                color: 'blue'
            }
        }
    });
</script>
</body>
</html>